<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./js/layui/css/layui.css" rel="stylesheet">
    <title>控制面板</title>
  </head>
  <script src="./js/vue.global.min.js"></script>
  <Body>
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo layui-bg-black">YzWorldControl</div>
        <ul id="top-bar-1" class="layui-nav layui-layout-left">
          <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm">
            <i class="layui-icon layui-icon-spread-left"></i>
          </li>
          <li class="layui-nav-item">

            <a href="javascript:;">
              <div onclick="load_app_cbc1_information()">
                {{ title1 }}
              </div>
            </a>
          
          </li>
          <li class="layui-nav-item layui-hide-xs">

            <a href="javascript:;">
              <div onclick="load_app_cbc2_information()">
                {{ title2 }}
              </div>
            </a>

          </li>
          <li class="layui-nav-item layui-hide-xs">

            <a href="javascript:;">
              <div onclick="load_app_cbc3_information()">
                {{ title3 }}
              </div>
            </a>

          </li>
          <li class="layui-nav-item layui-hide-xs">

            <a href="javascript:;">
              <div onclick="load_app_cbc4_information()">
                {{ title4 }}
              </div>
            </a>
          </li>
        </ul>
      </div>

      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
          <ul class="layui-nav layui-nav-tree" id="side-info">
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" href="javascript:;">Selected Data</a>
              <dl class="layui-nav-child" id="selected-data">
<!--                <dd><a href="javascript:;">menu 1</a></dd>-->
<!--                <dd><a href="javascript:;">menu 2</a></dd>-->
<!--                <dd><a href="javascript:;">menu 3</a></dd>-->
<!--                <dd><a href="javascript:;">the links</a></dd>-->
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">Function Menu</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">list 1</a></dd>
                <dd><a href="javascript:;">list 2</a></dd>
                <dd><a href="javascript:;">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
            <li class="layui-nav-item"><a href="javascript:;">the links</a></li>
          </ul>
        </div>
      </div>

      <div class="layui-body layui-bg-gray">
        <div style="padding: 15px;">
          <iframe frameborder="none" id="app-cbc1" width="100%">
          </iframe>
        </div>
      </div>
    </div>
  </Body>
  <script src="./js/layui/layui.js"></script>
  <script>
    const { createApp, ref } = Vue;
    let element;
    let layer;
    let util;
    let $;

    let count = ref(0);
    let app_cbc1;

    layui.use(['element', 'layer', 'util'], function(){
      element = layui.element;
      layer = layui.layer;
      util = layui.util;
      $ = layui.$;
    });

    const app_tb1=createApp({
      setup() {
        const title1 = ref('World Information');
        const title2 = ref('World FileSystem');
        const title3 = ref('World Control Center');
        const title4 = ref('World Slave Status');
        return {
          title1,
          title2,
          title3,
          title4
        }
      }
    }).mount('#top-bar-1');

    function load_app_cbc1_information() {
      let app_cbc1=$("#app-cbc1");
      if(app_cbc1[0].getAttribute("src")!=="html/WorldInformation.html"){
        app_cbc1.attr("src","html/WorldInformation.html");
      }
    }
    function load_app_cbc2_information() {
      let app_cbc1=$("#app-cbc1");
      if(app_cbc1[0].getAttribute("src")!=="html/WorldFileSystem.html"){
        app_cbc1.attr("src","html/WorldFileSystem.html");
      }
    }

    function load_app_cbc3_information() {
      let app_cbc1=$("#app-cbc1");
      if(app_cbc1[0].getAttribute("src")!=="html/WorldControlCenter.html"){
        app_cbc1.attr("src","html/WorldControlCenter.html");
      }
    }

    function load_app_cbc4_information() {
      let app_cbc1=$("#app-cbc1");
      if(app_cbc1[0].getAttribute("src")!=="html/WorldSlaveStatus.html"){
        app_cbc1.attr("src","html/WorldSlaveStatus.html");
      }
    }

    //iframe自适应高度,解决了动态更换页面高度无法自适应问题
    window.setInterval("reinitIframe()", 200);
    function reinitIframe() {
      let iframe = document.getElementById("app-cbc1");
      try {
        iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
      } catch (ex) { }
    }

    layui.use(['element', 'layer', 'util'], function(){
      element = layui.element;
      layer = layui.layer;
      util = layui.util;
      $ = layui.$;
    });

    window.addEventListener("message", e => {
      let dl= document.createElement("dd");
      dl.innerHTML="<a href=\"javascript:;\" draggable=\"true\" ondragstart='SideDrag(event)'>"+e.data+"</a>";
      $("#selected-data")[0].appendChild(dl);
      element.render('nav', 'selected-data');
    })

  </script>
  <script>
    function SideDrag(ev)
    {
      ev.dataTransfer.setData("Text",ev.target.textContent);
    }
  </script>
</html>